﻿<!DOCTYPE html>
<html class="dj_webkit dj_chrome dj_contentbox">
<head Access-Control-Allow-Origin:*>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Access-Control-Allow-Origin" content="*" />
    <title>ArcGIS</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://localhost:1112/arcgis_js_api/library/4.15/esri/css/main.css">
   <script src="http://192.168.1.101:1112/arcgis_js_api/library/4.15/init.js"></script>
    <script type="text/javascript" src="JS/drawGeo.js"></script>
    <script type="text/javascript" src="JS/QueryFilter.js"></script>
    <script type="text/javascript" src="JS/SketchHelper.js"></script>
    <link href="CSS/StyleSheet.css" rel="stylesheet" />
    <script type="text/javascript">
        var view;
        var subLyr;
        var graphicsLyr;
        window.onload = function () {
            require(["esri/Map", "esri/views/MapView", "esri/layers/TileLayer", "esri/layers/MapImageLayer", "esri/layers/FeatureLayer", "esri/layers/GraphicsLayer", "dojo/domReady!"],
                function (Map, MapView, TileLayer, MapImageLayer, FeatureLayer, GraphicsLayer) { 
                    graphicsLyr = new GraphicsLayer();

                    // Create a Map instance
                    var myMap = new Map({
                        basemap: "streets",
                        layers: [graphicsLyr]
                    });
                    // Create a MapView instance (for 2D viewing) and reference the map instance
                    view = new MapView({
                        map: myMap,
                        container: "map"
                    });

                    initSketch(view, graphicsLyr);
                }); 
        }

        function DrawGeoEve(e) {
            DrawGeo(view, e.id);
        }

        function QueryEve(e) {
            Query(view, e.id);
        }
    </script>
</head>
<body>
    <div style="background-color:dodgerblue; height:35px;width:100%;">
        <button onclick="DrawGeoEve(this)" id="Point">画点</button>
        <button onclick="DrawGeoEve(this)">画线</button>
        <button onclick="DrawGeoEve(this)" id="Polygon">画面</button>
        <button onclick="DrawGeoEve(this)" id="Pan">漫游</button>
        <button onclick="DrawGeoEve(this)" id="Clean">清除</button>
        <button onclick="QueryEve(this)" id="sub">变电站查询</button>
        <button onclick="QueryEve(this)" id="line">线路查询</button>
    </div>

    <div id="map" style="height:900px;width:100%;border:1px solid dodgerblue;">
    </div>

    <div class="esri-ui-top-right esri-ui-corner" style="top:65px;right:15px;">
        <div class="esri-component esri-sketch esri-widget" style="width:290px">
            <div class="esri-sketch__panel">
                <div class="esri-sketch__section esri-sketch__tool-section">
                    <button aria-label="移动" class="esri-sketch__button esri-icon-pan" title="移动"></button>
                    <button aria-label="修整" class="esri-sketch__button esri-icon-cursor esri-sketch__button--selected" title="修整"></button>
                </div>
                <div class="esri-sketch__section esri-sketch__tool-section">
                    <button aria-label="绘制点" class="esri-sketch__button esri-icon-map-pin" title="绘制点"></button>
                    <button aria-label="绘制折线" class="esri-sketch__button esri-icon-polyline" title="绘制折线"></button>
                    <button aria-label="绘制一个多边形" class="esri-sketch__button esri-icon-polygon" title="绘制一个多边形"></button>
                    <button aria-label="绘制一个矩形" class="esri-sketch__button esri-icon-checkbox-unchecked" title="绘制一个矩形"></button>
                    <button aria-label="绘制一个圆" class="esri-sketch__button esri-icon-radio-unchecked" title="绘制一个圆"></button>
                </div>
                <div class="esri-sketch__section esri-sketch__tool-section">
                    <button aria-label="撤消" class="esri-sketch__button esri-icon-undo" title="撤消"></button>
                    <button aria-label="恢复" class="esri-sketch__button esri-icon-redo" title="恢复"></button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
